<!DOCTYPE html>
<html>
<head>
  <style>
    .line {
      display: inline-block;
      min-width: 100%; /* 这确保当容器需要换行时，中文和英文都会换行 */
      white-space: nowrap; /* 这确保内容尽可能不换行 */
      overflow-wrap: break-word; /* 在必要时可以断字换行 */
    }

    /* 可选的媒体查询，以便在屏幕较大时不换行 */
    @media (min-width: 768px) {
      .line {
        white-space: normal;
      }
    }

    .english, .chinese {
      display: block; /* 让它们各自占一行 */
    }

  </style>
</head>
<body>

<div class="line">
  <span class="english">This is a long English sentence that may need to wrap to the next line.This is a long English sentence that may need to wrap to the next line.This is a long English sentence that may need to wrap to the next line.This is a long English sentence that may need to wrap to the next line.This is a long English sentence that may need to wrap to the next line.</span>
  <span class="chinese">这是一段可能需要换行的长中文句子。这是一段可能需要换行的长中文句子。这是一段可能需要换行的长中文句子。这是一段可能需要换行的长中文句子。这是一段可能需要换行的长中文句子。这是一段可能需要换行的长中文句子。这是一段可能需要换行的长中文句子。</span>
</div>
<!-- 重复上面的结构以添加更多文本 -->

</body>
</html>